<script setup lang="ts">
import { Typography } from 'ant-design-vue';
import { ref } from 'vue';

// 定义 detail 类型
interface Detail {
  type: string;
  title: string;
  link: string;
  sourceId?: string;
  url: string;
}

// 定义接收的 props
const props = defineProps({
  label: String,
  details: {
    type: Array as () => Detail[],
    default: () => [],
  },
  onStatusChange: Function,
});

const { Title } = Typography;

// 状态管理
const status = ref('未学习');

// 菜单选项
const menu = ref([
  { key: '未学习', label: '未学习' },
  { key: '进行中', label: '进行中' },
  { key: '完成', label: '完成' },
]);

// 获取状态颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case '完成':
      return '#52c41a'; // 绿色
    case '进行中':
      return '#faad14'; // 黄色
    case '未学习':
      return 'blue'; // 蓝色
    default:
      return '#d9d9d9'; // 默认灰色
  }
};

// 获取标签颜色
const getTagColor = (type: string) => {
  if (type === '文章资源')
    return 'gold';
  if (type === '视频资源')
    return 'purple';
  if (type === 'b站')
    return 'blue';
  return 'default';
};

// TODO: 判断是否为站内资源 后续需要优化
const isInternalResource = (title: string) => {
  return title.includes('北京邮电大学');
};

// 处理链接点击事件
const handleLinkClick = (link: string, sourceId?: string) => {
  if (sourceId)
    localStorage.setItem('sourceId', sourceId); // 将 sourceId 存储到 localStorage 中
  window.open(link, '_blank', 'noopener,noreferrer'); // 打开新页面
};
</script>

<template>
  <div style="padding: 20px;">
    <!-- 标题 -->
    <a-typography-title :level="4" style="font-size: 30px; margin-bottom: 20px;">
      {{ label }}
    </a-typography-title>

    <!-- 站内资源 -->
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div style="flex: 0 1 2%; height: 1px; background-color: green; margin-left: 10px;" />
      <a-tag color="green" style="padding: 0 8px; border-radius: 12px; margin-left: 0; margin-right: 0; font-size: 18px; border: 1px solid green;">
        站内资源
      </a-tag>
      <div style="flex: 1; height: 1px; background-color: green;" />
    </div>

    <div style="padding-left: 10px; margin-bottom: 20px;">
      <div v-for="(detail, index) in props.details.filter(detail => isInternalResource(detail.title))" :key="index" style="margin-bottom: 10px;">
        <a-tag :color="getTagColor(detail.type)">
          {{ detail.type }}
        </a-tag>
        <a
          href="#" style="margin-left: 8px; font-size: 18px; color: black; text-decoration: underline;"
          @click.prevent="detail.sourceId ? handleLinkClick(detail.url, detail.sourceId) : handleLinkClick(detail.url)"
        >
          {{ detail.title }}
        </a>
      </div>
    </div>

    <!-- 站外资源 -->
    <div style="display: flex; align-items: center; margin-bottom: 20px;">
      <div style="flex: 0 1 2%; height: 1px; background-color: blue; margin-left: 10px;" />
      <a-tag color="blue" style="padding: 0 8px; border-radius: 12px; margin-left: 0; margin-right: 0; font-size: 18px; border: 1px solid blue;">
        站外资源
      </a-tag>
      <div style="flex: 1; height: 1px; background-color: blue;" />
    </div>

    <div style="padding-left: 10px;">
      <div v-for="(detail, index) in props.details.filter(detail => !isInternalResource(detail.title))" :key="index" style="margin-bottom: 10px;">
        <a-tag :color="getTagColor(detail.type)" style="font-size: 18px;">
          {{ detail.type }}
        </a-tag>
        <a href="#" style="margin-left: 8px; font-size: 18px; color: black; text-decoration: underline;" @click.prevent="detail.sourceId ? handleLinkClick(detail.url, detail.sourceId) : handleLinkClick(detail.url)">
          {{ detail.title }}
        </a>
      </div>
    </div>
  </div>
</template>
